// 引入css样式
require("../../assets/css/common.css");
require("../../assets/font_44fp3ls0tzq/iconfont.css");
require("../../assets/css/reset.css");
require("../../assets/css/normalize.css");
require("../../assets/css/tabbar.less");
require("./mime_sports_data.less");

// 引入模块
const dom = require("../../utils/dom.js");
const axios = require("../../utils/axios.js");
//引入echarts图表插件--用于图表制作
import * as echarts from "echarts";

document.addEventListener("DOMContentLoaded", async function () {
	//点击返回上一页
	dom.get(".boult i").addEventListener("click", function () {
		history.back();
	});

	//头部页面获取运动数据;
	let result = await axios.get("/api/exercise");
	let { sum7Duration, sum7Calorie, sum7Meter, days } = result.data.data;
	dom.get(".dooted p span").textContent = sum7Duration;
	dom.get(".expend p span").textContent = sum7Calorie;
	dom.get(".sports span").textContent = (sum7Meter / 1000).toFixed(2);
	dom.get(".add span").textContent = days.length;
	dom.get(".continue span").textContent = days[0].count;
	console.log(result.data.data);

	//一:图表柱状体1:
	//获取柱状图日期
	let x1 = days.map((v) => v.date.slice(5));
	//获取七天的运动时长
	let y1 = days.map((v) => v.sumDuration);
	// 基于准备好的dom，初始化echarts实例
	var myChart1 = echarts.init(document.querySelector(".chart1"));
	// 绘制图表(柱状图)
	myChart1.setOption({
		title: {
			text: "近7天运动时长",
			left: 20,
			top: 20,
		},
		//网格布局
		grid: {
			bottom: 30,
			left: 60,
		},
		xAxis: {
			type: "category",
			data: x1,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				left: 20,
				radius: "20%",
				data: y1,
				type: "bar",
				showBackground: true,
				backgroundStyle: {
					color: "rgba(180, 180, 180, 0.2)",
				},
			},
		],
	});

	//二:图表饼状2:
	//跑步
	let run = 0;
	days.forEach((v) => {
		run += v.exerciseData[0].duration;
	});

	//骑行
	let cycling = 0;
	days.forEach((v) => {
		cycling += v.exerciseData[1].duration;
	});
	//训练
	let drill = 0;
	days.forEach((v) => {
		drill += v.exerciseData[2].duration;
	});
	var myChart2 = echarts.init(document.querySelector(".chart2"));
	// 绘制图表(柱状图)
	myChart2.setOption({
		//标题
		title: {
			text: "运动分类",
			// subtext: "Fake Data",
			left: 20,
			top: 20,
		},
		//提示工具
		tooltip: {
			trigger: "item",
		},
		//图例组件
		legend: {
			orient: "vertical",
			left: "right",
			top: 20,
		},
		series: [
			{
				name: "运动分类",
				type: "pie",
				radius: "70%",
				top: 20,
				data: [
					{ value: run, name: "跑步" },
					{ value: cycling, name: "骑行" },
					{ value: drill, name: "训练" },
				],
				//文本标签
				label: {
					formatter: "{d}%",
					//放在饼内部
					position: "inside",
					fontSize: 14,
					color: "#fff",
				},
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
			},
		],
	});

	//三:图表3堆叠柱状图:
	let runArr = days.map((v) => v.exerciseData[0].calorie);
	let cyclingArr = days.map((v) => v.exerciseData[1].calorie);
	let drillArr = days.map((v) => v.exerciseData[2].calorie);

	//堆叠柱状图
	var myChart3 = echarts.init(document.querySelector(".chart3"));
	myChart3.setOption({
		//标题
		title: {
			text: "近七日运动",
			// subtext: "Fake Data",
			left: 20,
			top: 10,
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow",
			},
		},
		legend: {
			left: "right",
			top: 20,
		},
		grid: {
			left: "3%",
			right: "5%",
			bottom: "3%",
			containLabel: true,
		},
		xAxis: {
			type: "value",
		},
		yAxis: {
			type: "category",
			data: x1,
		},
		series: [
			{
				name: "跑步",
				type: "bar",
				stack: "total",
				radius: "50%",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: runArr,
			},
			{
				name: "骑行",
				type: "bar",
				stack: "total",
				radius: "50%",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: cyclingArr,
			},
			{
				name: "训练",
				type: "bar",
				stack: "total",
				radius: "50%",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: drillArr,
			},
		],
	});

	//四:图表3折线图:
	let runArr1 = days.map((v) => v.count);
	var myChart4 = echarts.init(document.querySelector(".chart4"));
	// 绘制图表(柱状图)
	myChart4.setOption({
		//标题
		title: {
			text: "近七日运动",
			left: 10,
			top: 20,
		},
		xAxis: {
			type: "category",
			data: x1,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				bottom: 20,
				data: runArr1,
				type: "line",
				smooth: true,
			},
		],
	});
});
